<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-输出的几个指令</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="demo">
        <!-- 早期使用html文件才会导致的问题，工程化中不常见 -->
        <p v-cloak>{{ str }}</p>

        <h3 v-cloak>输出： {{ str }}</h3>

        <!-- 输出文本（使用指令的方式会把文本的内容覆盖） -->
        <p v-text="str">这是将来要输出的东西</p>
        <p v-text="link"></p>
        <!-- v-text 和 v-html 就是js中 innerText 和 innerHTML -->
        <p v-html="link"></p>

        <!-- v-once 只会在初次时渲染data中的数据，后续不再更新 -->
        <p v-once>{{ num }}</p>
        <button @click="num++">点击增加数字</button>

        <!-- v-pre 也是一个修饰，告知vue内部不需要编译 -->
        <div v-pre style="border: 1px dashed #ccc;">
            <p>{{ num }}</p>
            <p>{{ link }}</p>
        </div>
    </div>


    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {
                num: 100,
                str: 'HELLO 尚硅谷',
                link: '<a href="http://www.atguigu.com">跳转去学习</a>'
            }
        })
    </script>
</body>
</html>